import React, {useEffect, useState} from 'react';
import {Breadcrumb, Button, Form, Input, Modal, Pagination, Space, Table} from "antd";
import Toolbar from "../../components/toolbar";
import PaginationBar from "../../components/paginationbar";
import common from "../../common";

function Event(props) {
    let [data, setDate] = useState([])
    let [page, setPage] = useState(1)
    let [limit, setLimit] = useState(10)
    let [total, setTotal] = useState(0)
    let [changeItem, setChangeItem] = useState({})

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '事件名称',
            dataIndex: 'name',
        },
        {
            title: '操作',//删除编辑操作
            key: 'id',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        setChangeVisible(true)
                        setChangeItem(record)
                    }}>编辑</a>
                    <a onClick={() => {
                        del(record.id)
                    }}>删除</a>
                </Space>
            ),
        },
    ];

    useEffect(() => {
        init(page, limit)
    }, [page, limit])

    let init = (page, limit) => {
        let query = {
            page: page,
            limit: limit,
        }
        common.ajax("get", "/front/event/list", query)
            .then(res => {
                setTotal(res.pagination.total)
                setDate(res.list)
            })
    }

    const creat = (values) => {
        common.ajax("post", "/front/event/create", values).then(() => {
            common.toast("更新成功")
            init(page, limit)
            setVisible(false)
        })
    }

    const update = (values) => {
        let value = {...values, id: changeItem.id}
        common.ajax("post", "/front/event/update", value)
            .then(() => {
                common.toast("更新成功")
                init(page, limit)
                setChangeVisible(false)
            })
    }

    const del = (id) => {
        common.confirm("确定删除吗", () => {
            common.ajax("post", "/front/event/delete", {id}).then(() => {
                common.toast('删除成功')
                init(page, limit)
            })
        })
    }

    let [visible, setVisible] = useState(false);//新增弹框
    let [changeVisible, setChangeVisible] = useState(false);//编辑弹框

    return (
        <div>
            <Breadcrumb>
                <Breadcrumb.Item>系统设置</Breadcrumb.Item>
                <Breadcrumb.Item>报警种类设置</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>

                <Toolbar>
                    <Button type="primary"
                            onClick={() => {
                                setVisible(true);
                            }}>新增</Button>
                </Toolbar>

                <Table rowKey={columns => columns.id} columns={columns} dataSource={data} pagination={false}/>
                <PaginationBar>
                    <Pagination
                        style={{marginTop: 25}}
                        showQuickJumper current={page} total={total} defaultPageSize={limit}
                                onChange={(pageNumber) => {
                                    setPage(pageNumber)
                                }}/>
                </PaginationBar>


                <Modal visible={visible}
                       title="添加事件类型"
                       onCancel={() => {
                           setVisible(false)
                       }}
                       destroyOnClose={true}
                       footer={null}
                       maskClosable={false}>
                    <Form name="basic" labelCol={{span: 6}}
                          wrapperCol={{span: 14}}
                          onFinish={creat}>
                        <Form.Item style={{color: "black"}} label="事件名称" name="name"
                                   rules={[{required: true, message: '事件名称不能为空!'}]}>
                            <Input/>
                        </Form.Item>
                        <Form.Item wrapperCol={{offset: 6, span: 14}}>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal visible={changeVisible}
                       title="修改事件类型"
                       onCancel={() => {
                           setChangeVisible(false)
                       }}
                       destroyOnClose={true}
                       footer={null}
                       maskClosable={false}>
                    <Form name="basic" labelCol={{span: 6}}
                          wrapperCol={{span: 14}}
                          onFinish={update}>
                        <Form.Item style={{color: "black"}} label="事件名称" name="name"
                                   initialValue={changeItem.name}
                                   rules={[{required: true, message: '事件名称不能为空!'}]}>
                            <Input/>
                        </Form.Item>
                        <Form.Item wrapperCol={{offset: 6, span: 14}}>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>
    );

}

export default Event;